<template>
  <div class="pr-12">
    <div class="bg-white flex items-center justify-between">
      <div>
        <div class="text-xl font-semibold">数据统计</div>
        <div>数据统计，包括用户相关统计、群相关统计、消息相关统计</div>
      </div>
      <div>
        <span class="mr-1">日期</span>
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="日期"
          @change="fetch"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8">
      <this-line ref="new_user" />
      <this-line ref="active_user" />
      <this-line ref="total_user" />
      <this-line ref="total_msg" />
      <this-line ref="new_group" />
      <this-line ref="total_group" />
      <!-- <this-line ref="" /> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { parseTime } from "@/utils/index";
import thisLine from "./line.vue";

export default {
  name: "Dashboard",
  components: { thisLine },
  data() {
    return {
      date: parseTime(new Date()),
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.fetch();
  },
  methods: {
    // onChangeDate() {
    //   console.log("this.date", this.date);
    // },
    fetch() {
      this.axios.post("admin/getIndexInfo", { date: this.date }).then((res) => {
        if (res.retCode != 0) {
          return this.$message.error(res.retMsg);
        }
        const {
          newUser,
          activeUser,
          totalUser,
          newGroup,
          totalGroup,
          totalMsg,
        } = res.data;
        this.drawLine("new_user", "日新增用户数", newUser);
        this.drawLine("active_user", "日活跃用户数", activeUser);
        this.drawLine("total_user", "累计用户数", totalUser);
        this.drawLine("total_msg", "日消息发送数", totalMsg);
        this.drawLine("new_group", "日创建群组数", newGroup);
        this.drawLine("total_group", "累计群组数", totalGroup);
      });
    },
    drawLine(el, title, arr) {
      const x = arr.map((item) => parseTime(item.date, "{m}-{d}"));
      const y = arr.map((item) => item.count);

      this.$refs[el].drawLineChart(title, x, y);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
